<template>
<!-- $emit(click) 触发父组件中<mm-cell>的click事件 -->
  <van-cell
    class="mm-cell"
    :value="value"
    :border="false"
    @click="$emit('click')"
    is-link
    center
  >
    <!-- 自定义左侧title内容插槽 （传数据）-->
    <template #title>
      <!-- 没有icon就没有i标签占位 -->
      <i :class="`iconfont ${icon}`" v-if="icon"></i>
      <span class="custom-title">{{title}}</span>
    </template>
    <!-- 自定义右侧value内容插槽 （传结构）-->
    <slot></slot>
  </van-cell>
</template>

<script>
export default {
  name: 'mmCell',
  props: ['value', 'icon', 'title']
}
</script>

<style lang='less'>
.mm-cell {
  width: 345px;
  height: 55px;
  font-size: 14px;
  color: @main-font-color;
  .iconfont {
    margin-right: 12px;
    font-size: 20px;
    position: relative;
    top: 2px;
  }
  .van-cell__value {
    font-size: 14px;
    color: @subdominant-font-color;
  }
}
</style>
